<template>
    <div class="boxPro">
        <div class="title">{{$t('schledtaskrecod')}}</div>
        <el-button type="primary" icon="el-icon-d-arrow-left" :circle="true" @click="returnYa" v-preventReClick></el-button>
        <el-table border style="width: 800px" :data="taskOperList" stripe>
            <el-table-column type="index" :label="$t('sernum')" width="51">
            </el-table-column>
            <el-table-column prop="taskId" :label="$t('taskid')" width="65">
            </el-table-column>
            <el-table-column prop="jobName" :label="$t('tsknam')" width="86">
            </el-table-column>
            <el-table-column prop="jobClass" :label="$t('taskclsname')" width="347">
            </el-table-column>
            <el-table-column prop="runResult" :label="$t('oprtionresult')" width="86">
            </el-table-column>
            <el-table-column prop="completeTime" :label="$t('completime')" width="163">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="idList.pageNum"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="idList.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import {
    getrecordpagelist
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            total: 0,
            idList: {
                orderParamIdx: null,
                orderType: null,
                pageNum: 1,
                pageSize: 10,
                taskId: null
            },
            taskOperList: []
        }
    },
    methods: {
        getOperA () {
            getrecordpagelist(JSON.stringify(this.idList)).then(res => {
                if (res.status === 200) {
                    this.total = res.data.total - 0
                    this.taskOperList = res.data.list
                    this.taskOperList.forEach(item => {
                        if (item.runResult === 'success') {
                            item.runResult = this.$t('succ')
                        }
                    })
                }
            })
        },
        returnYa () {
            this.$router.go(-1)
            window.sessionStorage.removeItem('taskOperId')
        },
        handleSizeChange (newSize) {
            this.idList.pageSize = newSize
            this.getOperA()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.idList.pageNum = newNum
            this.getOperA()
        }
    },
    mounted () {
        this.idList.taskId = window.sessionStorage.getItem('taskOperId')
        this.getOperA()
    }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';

.boxPro {
    position: relative;
    width: 800px;
    margin: 0 auto;
    .title {
        display: inline-block;
        margin-top: 20px;
        font-size: 18px;
        font-weight: 700;
    }
    .el-table {
        margin-top: 40px;
        font-size: 12px;
        border: 1px solid #B7B7B7;
        @{deep} .el-table__header-wrapper {
            background-color: #F2F2F2 !important;
        }
    }
    @{deep} .el-table th, .el-table tr {
        background-color: #F2F2F2 !important;
    }
    .el-pagination {
        margin-top: 40px;
        @{deep} .btn-prev, @{deep} .el-pager li, @{deep} .btn-next {
            background-color: #F0F0F0!important;
        }
    }
    .el-button {
        position: absolute;
        top: 20px;
        right: 0;
    }
}

</style>
